<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <div style="display: inline-block">
            <el-button @click="goBack" icon="el-icon-back" size="small" type="text">返回</el-button>
          </div>
          <div style="display: inline-block">|</div>
          <div style="display: inline-block;">
            <div style="padding-bottom: 15px;margin-left:10px">
              <span style=" font-family: 'Microsoft YaHei',serif;display: inline-block">新建术语</span>
            </div>
          </div>
          <div style="border-bottom: solid 1px #C9C9C9;"></div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-scrollbar style="height:100%">
            <MenuItem :item="item" :key="index" :reorder="false" @change-selection="refreshList"
                      v-for="(item, index) in items"></MenuItem>
          </el-scrollbar>
        </el-aside>
        <el-main :style="{height: mainHeight + 'px'}">
          <div>
            <a name="术语正名"></a>
            <div><span>术语正名</span><span style="color: red;">*</span></div>
            <div style="margin-top: 10px; width: 255px">
              <KindEditor :content.sync="name" editor-type="Input"></KindEditor>
            </div>
            <div v-for="nameSourceItem of nameSource" style="margin: 10px">
              <el-select v-model="nameSourceItem.category" placeholder="请选择图书级别" size="small"
                         :disabled="availableFlag">
                <el-option
                  v-for="item in CONST.TERM_BOOK_CATEGORY"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <span style="color: red;">*</span>
              <el-input v-model="nameSourceItem.name" class="knowledge-source-input" placeholder="图书名称"
                        :disabled="availableFlag" popper-class="my-popper" size="small"></el-input>
              <span style="color: red;">*</span>
              <el-input v-model="nameSourceItem.version" class="knowledge-source-input" placeholder="图书版号"
                        :disabled="availableFlag" size="small"></el-input>
              <span style="color: red;">*</span>
              <el-input v-model="nameSourceItem.isbn" class="knowledge-source-input" placeholder="ISBN"
                        :disabled="availableFlag" size="small"></el-input>
              <span style="color: red;">*</span>
            </div>
          </div>
          <div style="margin-bottom: 10px;margin-top: 10px ">
            <a name="英文名称"></a>
            <div><span>英文名称</span></div>
            <div style="margin-top: 10px">
              <MultiValueBox :fieldValue.sync="englishName"/>
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="英文简称"></a>
            <div><span>英文简称</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="englishAbbr"/>
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="日文"></a>
            <div><span>日文</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="japaneseName"/>
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="法文"></a>
            <div><span>法文</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="frenchName"/>
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="俄文"></a>
            <div><span>俄文</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="russianName"/>
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="德文"></a>
            <div><span>德文</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="germanName"/>
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="同义词"></a>
            <div><span>同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiObjectBox :fieldObject.sync="synonym"/>
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="英文缩写同义词"></a>
            <div><span>英文缩写同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="englishAbbrSynonym"/>
            </div>
          </div>

          <div style="margin-bottom: 10px;">
            <a name="英文同义词"></a>
            <div><span>英文同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="englishNameSynonym"/>
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="日文同义词"></a>
            <div><span>日文同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="japaneseNameSynonym"/>
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="法文同义词"></a>
            <div><span>法文同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="frenchNameSynonym"/>
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="俄文同义词"></a>
            <div>
              <span>俄文同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="russianNameSynonym"/>
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="德文同义词"></a>
            <div><span>德文同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="germanNameSynonym" ref="component"/>
            </div>
          </div>
          <div>
            <div>
              <span>释义</span>
            </div>
            <div>
              <div :idx="index" v-for="(pa, index) in paraphrase">
                <div style="display: inline-block;width: 500px">
                  <KindEditor :content.sync="paraphrase[index].value" editor-type="Textarea"></KindEditor>
                </div>
                <div style="display: inline-block; vertical-align: top; ">
                  <el-button @click="paraphrase.splice(index, 1)" circle icon="el-icon-minus" plain type="danger"
                             v-if="paraphrase.length > 1"></el-button>
                  <el-button v-if="index === paraphrase.length - 1" circle icon="el-icon-plus" plain
                             type="success"
                             @click="paraphrase.push({isbn: '',name: '',category: '',version: '',type: 1, value: '', availableFlag: true})"></el-button>
                </div>
                <div style="margin: 10px">
                  <el-select v-model="paraphrase[index].category" placeholder="请选择图书级别" size="small"
                             :disabled="paraphrase[index].availableFlag ? false : true">
                    <el-option
                      v-for="item in CONST.TERM_BOOK_CATEGORY"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <span style="color: red;">*</span>
                  <el-input v-model="paraphrase[index].name" class="knowledge-source-input" placeholder="图书名称"
                            :disabled="paraphrase[index].availableFlag ? false : true" popper-class="my-popper"
                            size="small"></el-input>
                  <span style="color: red;">*</span>
                  <el-input v-model="paraphrase[index].version" class="knowledge-source-input"
                            :disabled="paraphrase[index].availableFlag ? false : true" placeholder="图书版号"
                            size="small"></el-input>
                  <span style="color: red;">*</span>
                  <el-input v-model="paraphrase[index].isbn" class="knowledge-source-input"
                            :disabled="paraphrase[index].availableFlag ? false : true" placeholder="ISBN"
                            size="small"></el-input>
                  <span style="color: red;">*</span>
                </div>
              </div>
            </div>
            <el-button v-if="paraphrase.length == 0" circle icon="el-icon-plus" plain
                       type="success"
                       @click="paraphrase.push({ isbn: '',name: '',category: '',version: '',type: 1, availableFlag: true})"></el-button>
          </div>
        </el-main>
      </el-container>
      <el-footer height="30">
        <div style="border-top: solid 1px #C9C9C9; position: relative">
          <div style="float: right; margin-top: 10px;">
            <el-button size="small" @click="goBack">取 消</el-button>
            <el-button @click="commit()" size="small" type="success">
              保存
            </el-button>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import MenuItem from "../common/MenuItem";
import MultiValueBox from "../knowledge/knowledgeEdit/MultiValueBox"
import KindEditor from "../kindeditor/KindEditor"
import MultiObjectBox from "../common/MultiObjectBox";

export default {
  name: "StandardTermEdit",
  components: {
    MultiObjectBox,
    MenuItem,
    MultiValueBox,
    KindEditor
  },
  data() {
    return {
      items: [
        {
          id: '1',
          name: "术语正名",
          selected: true,
        },
        {
          id: '2',
          name: "英文名称",
          selected: false,
        },
        {
          id: '3',
          name: "英文简称",
          selected: false,
        },
        {
          id: '4',
          name: "日文",
          selected: false,
        },
        {
          id: '5',
          name: "法文",
          selected: false,
        },
        {
          id: '6',
          name: "俄文",
          selected: false,
        },
        {
          id: '7',
          name: "德文",
          selected: false,
        },
        {
          id: '8',
          name: "同义词",
          selected: false,
        },
        {
          id: '9',
          name: "英文同义词",
          selected: false,
        },
        {
          id: '10',
          name: "英文缩写同义词",
          selected: false,
        },
        {
          id: '11',
          name: "日文同义词",
          selected: false,
        },
        {
          id: '12',
          name: "法文同义词",
          selected: false,
        },
        {
          id: '13',
          name: "俄文同义词",
          selected: false,
        },
        {
          id: '14',
          name: "德文同义词",
          selected: false,
        },
        {
          id: '15', name: "释义",
          selected: false,
        }
      ],
      editId: '',
      name: '',
      englishName: [],
      englishAbbr: [],
      japaneseName: [],
      japaneseNameSynonym: [],
      frenchName: [],
      frenchNameSynonym: [],
      russianName: [],
      russianNameSynonym: [],
      germanName: [],
      germanNameSynonym: [],
      paraphrase: [],
      synonym: [],
      englishNameSynonym: [],
      englishAbbrSynonym: [],
      mainHeight: 0,
      version: 0,
      nameSource: [
        {
          isbn: '',
          name: '',
          category: '',
          version: '',
          type: 1
        }
      ],
      availableFlag: false
    }
  },
  methods: {
    commit() {
      if (!UTIL.isNotEmpty(this.name)) {
        this.$message.warning("请填写正名")
        return;
      }
      let nameAndSynonymArray = [];
      this.synonym.forEach(item => {
        nameAndSynonymArray.push(item);
      })
      nameAndSynonymArray.push(this.name);
      let nameAndSynonymSet = new Set(nameAndSynonymArray);
      if (nameAndSynonymArray.length != nameAndSynonymSet.size) {
        this.$message.warning("正名或同义词重复,请修改");
        return;
      }

      for (let i = 0; i < this.nameSource.length; i++) {
        // 判断来源是否填写
        if (this.nameSource[i].category === "") {
          this.$message.warning('图书级别必填');
          return;
        }
        if (UTIL.isEmpty(this.nameSource[i].name)) {
          this.$message.warning('图书名称必填');
          return;
        }
        if (this.nameSource[i] === 1 && UTIL.isEmpty(this.nameSource[i].version)) {
          this.$message.warning('图书版本必填');
          return;
        }
        if (UTIL.isEmpty(this.nameSource[i].isbn)) {
          this.$message.warning('图书ISBN号必填');
          return;
        }
      }

      for (let i = 0; i < this.paraphrase.length; i++) {
        if (this.paraphrase[i].category === "") {
          this.$message.warning('图书级别必填');
          return;
        }
        if (UTIL.isEmpty(this.paraphrase[i].name)) {
          this.$message.warning('图书名称必填');
          return;
        }
        if (this.paraphrase[i].type === 1 && UTIL.isEmpty(this.paraphrase[i].version)) {
          this.$message.warning('图书版本必填');
          return;
        }
        if (UTIL.isEmpty(this.paraphrase[i].isbn)) {
          this.$message.warning('图书ISBN号必填');
          return;
        }
      }
      // 向后台推送数据
      let termStandard = {};
      if (this.editId) {
        termStandard.id = this.editId;
      }
      termStandard.name = this.name;
      termStandard.nameSource = this.nameSource;
      termStandard.version = this.version;
      termStandard.englishName = this.englishName.join(';');
      termStandard.englishAbbr = this.englishAbbr.join(';');
      termStandard.japaneseName = this.japaneseName.join(';');
      termStandard.japaneseNameSynonym = this.japaneseNameSynonym.join(';');
      termStandard.frenchName = this.frenchName.join(';');
      termStandard.frenchNameSynonym = this.frenchNameSynonym.join(';');
      termStandard.russianName = this.russianName.join(';');
      termStandard.russianNameSynonym = this.russianNameSynonym.join(';');
      termStandard.germanName = this.germanName.join(';');
      termStandard.germanNameSynonym = this.germanNameSynonym.join(';');
      termStandard.explanation = this.paraphrase;
      termStandard.synonym = this.synonym;
      termStandard.englishNameSynonym = this.englishNameSynonym.join(';');
      termStandard.englishAbbrSynonym = this.englishAbbrSynonym.join(';');

      // 释义去除标志
      for (let explanationKey of termStandard.explanation) {
        delete explanationKey.availableFlag
      }

      // 释义排序， 跟正名一致的排前面， 不一致的按级别排
      let sameSourceExplain = termStandard.explanation.filter(explainItem => termStandard.nameSource.find(item => item.isbn === explainItem.isbn))
      // 正名一致的,根据级别排序
      sameSourceExplain.sort((item1, item2) => item1.category - item2.category)
      // 不一致的；
      let notSameSourceExplain = termStandard.explanation.filter(explainItem => !sameSourceExplain.includes(explainItem)).sort((item1, item2) => item1.category - item2.category)
      sameSourceExplain = sameSourceExplain.concat(notSameSourceExplain)
      termStandard.explanation = sameSourceExplain


      this.axios.post('/pmph/action/term/commit', termStandard)
        .then((res) => {

          if (res.data) {
            this.goBack();
          } else {
            this.waitingResponse = false
          }
        })
    },
    goBack() {
      this.$router.push("/term/termStandard")
    },
    refreshList(item) {
      window.location.href = '#' + item.name;
      this.setAllItemsUnselected();
      this.setSelectedItem(item)
    },
    setAllItemsUnselected() {
      this.items.forEach(item => {
        item.selected = false;
      });
    },
    setSelectedItem(selectedItem) {
      this.items.forEach(item => {
        if (item.id === selectedItem.id) {
          item.selected = true;
        }
      });
    }
  },
  created() {
    this.mainHeight = CONST.WORKSPACE_HEIGHT - 120
    this.editId = this.$route.query.id
    if (this.$route.query.id) {
      this.availableFlag = true;
      this.axios.get("/pmph/action/term/selectEditById", {
        params: {
          id: this.$route.query.id
        }
      }).then(res => {
        this.editId = res.data.id
        this.version = res.data.version
        this.name = res.data.name
        this.nameSource = res.data.nameSource
        this.englishNameSynonym = JSON.parse(res.data.englishNameSynonym);
        this.englishName = JSON.parse(res.data.englishName);
        this.englishAbbr = JSON.parse(res.data.englishAbbr);
        this.japaneseName = JSON.parse(res.data.japaneseName);
        this.japaneseNameSynonym = JSON.parse(res.data.japaneseNameSynonym);
        this.frenchName = JSON.parse(res.data.frenchName);
        this.frenchNameSynonym = JSON.parse(res.data.frenchNameSynonym);
        this.russianName = JSON.parse(res.data.russianName);
        this.russianNameSynonym = JSON.parse(res.data.russianNameSynonym);
        this.germanName = JSON.parse(res.data.germanName);
        this.germanNameSynonym = JSON.parse(res.data.germanNameSynonym);
        this.paraphrase = res.data.paraphrase;
        this.englishAbbrSynonym = JSON.parse(res.data.englishAbbrSynonym);
        this.synonym = res.data.synonym;
      })
    }
  }
}
</script>

<style scoped>
.knowledge-source {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 12px;
  color: #666666;
  letter-spacing: 0;
}

.knowledge-source-input {
  width: 20%;
}
</style>
